<template>
  <div class="content" @click="fun()">
      <div class="content_1">
          <h5>{{title|textstr}}</h5>
          <div class="imgs">
              <img :src="imgs">
          </div>
          <div class="time">
               <p class="p1">{{source}}</p>
               <p class="p2">{{time}}</p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:['title','source','time','imgs','id'],
    filters:{
        textstr(title){
            if(title.length>21){
                return title.substr(0,21)+"..."
            }else{
                return title
            }
            
        }
    },
    methods:{
        fun(){
            this.$router.push({path:'/newsinfo',query:{title:this.title,source:this.source,time:this.time,id:this.id}})
        }
    }
}
</script>

<style scoped>
.content{
    width:3.6rem;
    height:2.2rem;
    position: relative;
    border-bottom:1px solid #f4f4f4;
}
.content_1{
    width:3.4rem;
    height:2.2rem;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
}
h5{
    font-size:0.16rem;
    line-height: 0.38rem;
}
.imgs{
    width:3.4rem;
    height:1.48rem
}
img{
    width:100%;
    height:100%;
}
.time{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    line-height: 0.32rem;
}
.p1{
    font-size:0.12rem;
    color:gray;
}
.p2{
    font-size:0.12rem;
    color:gray;
}
</style>